<template>
	<view class="container" :style="{paddingTop:tH}"> 
		<view class="headerTit" :style="{height:tH,fontSize:'4vh',padding:pT}">
			
			<view v-show="label" style="text-align: left;color:#fff;height:100%"> <text>{{label}}</text> </view> 
			<view class="titRight" style="float:right;height:100%;margin-left: 2vw;white-space: nowrap;color:white">
				<slot name="titRight"/>
			</view>
		</view>
		<scroll-view class="content" scroll-y="true" :class="{'noPadTop' :withoutTop}" :style="{height: `calc(100vh - ${tH})`}">
			<slot name="content"/>
		</scroll-view>
		
		
	</view>
	
	
</template>

<script>
	export default {
		name:'sysContainer',
		components: {
		},
		props:{
			label:{
				type: String,
				default: ''
			},
			showBack:{
				type:[Boolean,String],
				default:false
			},
			withoutTop:{
				type:[Boolean,String],
				default:false
			}
		},
		data() {
			return {
				tH:0,
				pT:0,
				title:'',
				bases:[],
				waitSelectValue:'',
				selectValue:'',
				selectName:''
			}
		},
		created() {
			let that = this
			// #ifdef MP-WEIXIN
			uni.getSystemInfo({
				success: function(res) {
					 
					// uni.setStorageSync('titleHeight',res.statusBarHeight+capsuleH)
					that.tH = uni.getMenuButtonBoundingClientRect().height+ uni.getMenuButtonBoundingClientRect().top*2+'px'
					// that.tH ='64px'
					that.pR = uni.getMenuButtonBoundingClientRect().left
					that.pT = 0
				}
			});
			// #endif
			// #ifdef APP-PLUS
			let systemInfo = uni.getSystemInfoSync()
			this.pT = systemInfo.statusBarHeight+'px';
			this.tH = systemInfo.statusBarHeight+30+'px' ;
			// console.log(systemInfo)
			// uni.getSystemInfo({
			// 		success: (e) => {
			// 			console.log(e)
			// 			that.pT = e.statusBarHeight;
			// 			that.tH = e.statusBarHeight+30+'px' ;
			// 			console.log(that.tH)
			// 			// that.pR = 0
			// 		}
			// 	})
			// #endif
			// this.tH = uni.getStorageSync('titleHeight')+20+ 'px'
			// this.pT = uni.getStorageSync('batHeight')/2+10+ 'px'
			this.selectValue = uni.getStorageSync('baseId')
			this.bases = uni.getStorageSync('ddwb').bases
			if(this.selectValue&&this.bases.length>0){
				this.selectName = this.bases.find(item=>{
					return item.id == this.selectValue
				}).baseName
			}
			
		},
		
		methods: {
			backPage(){
				uni.navigateBack({
					delta:-1
				})
			},
			showSelectList() {
				// this.showList = true
				this.$refs.popup.open()
			},
			checkThis(val) {
				// if(this.selectValue!=e.currentTarget.dataset.id){
				this.waitSelectValue = val
				// }
				// this.showList=false
			},
			sureSelect() {
				if (this.selectValue != this.waitSelectValue && this.waitSelectValue) {
					this.selectValue = this.waitSelectValue
					uni.setStorageSync('baseId', this.waitSelectValue)
					this.waitSelectValue = ''
					this.selectName = this.bases.find(item=>{
						return item.id == this.selectValue
					}).baseName
					this.$emit('change',this.selectValue)
				}
				this.$refs.popup.close()
				// this.showList=false
			},
			closeSelect() {
				this.waitSelectValue = ''
				this.$refs.popup.close()
			},
		}
	}
</script>

<style scoped lang="scss">
	.container{
		width:100%
	}
	.headerTit {
		background: linear-gradient(-90deg, #D10202, #F82A08);
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 0;
		width: 100%;
		box-sizing: border-box;
		// font-size:1em
	}
	.backPage{
		// position: absolute;
		// left:17px;
		color:#fff
	}
	.content{
		// padding:10px 0;
		box-sizing: border-box;
		color:#333333;
		
	}
	.noPadTop{
		padding-top:0 !important
	}
	.selectList {
		width: 100%;
		height: 585rpx;
		z-index: 9;
		background: #fff;
		// padding:50rpx;
		padding-bottom: 110rpx;
		position: absolute;
		bottom: 0;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	
		.selectTit {
			padding: 30rpx 50rpx;
			border-bottom: 1px solid #F0F0F0;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	
		.allSelect {
			padding: 0 25rpx;
			margin-top: 16rpx;
			.singleSelect {
				width: 100%;
				padding: 25rpx 20rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
	
			.selectIcon {
				visibility: hidden;
				margin-right:30rpx;
			}
	
			.beSelected {
				border-radius: 8rpx;
				background: #F0F0F0;
	
				.selectIcon {
					visibility: visible;
					color:#06AE61
				}
			}
		}
	
	}
	
</style>
